<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基础使用</text>
         <view class="uv-demo-block__content">
            <uv-subsection
               :list="list"
               mode="subsection"
               :current="current1"
               @change="change1"
            ></uv-subsection>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">按钮模式</text>
         <view class="uv-demo-block__content">
            <uv-subsection
               :list="list"
               mode="button"
               :current="current2"
               @change="change2"
            ></uv-subsection>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">更换主题</text>
         <view class="uv-demo-block__content">
            <uv-subsection
               :list="list"
               mode="subsection"
               :current="current3"
               activeColor="#f56c6c"
               @change="change3"
            ></uv-subsection>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">默认位置</text>
         <view class="uv-demo-block__content">
            <uv-subsection
               :list="list"
               mode="button"
               :current="current4"
               activeColor="#f9ae3d"
               @change="change4"
            ></uv-subsection>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">在其他组件中使用</text>
         <view class="uv-demo-block__content">
            <uv-button type="primary" @click="handleClick">打开</uv-button>
         </view>
      </view>
   </view>
   <uv-popup ref="popupRef" :round="10" @close="handleClose">
      <view class="popup-content">
         <uv-subsection
            :list="list"
            :current="current1"
            mode="button"
            ref="subsectionRef"
            @change="change1"
         ></uv-subsection>
      </view>
   </uv-popup>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue';

const popupRef = ref();
const subsectionRef = ref();

const list = ref(['未付款', '已付款', '待评价']);

const current1 = ref(0);
const current2 = ref(0);
const current3 = ref(0);
const current4 = ref(1);

const change1 = (e: any) => {
   console.log('change1:', e);
   current1.value = e;
};

const change2 = (e: any) => {
   console.log('change2:', e);
   current2.value = e;
};

const change3 = (e: any) => {
   console.log('change3:', e);
   current3.value = e;
};

const change4 = (e: any) => {
   console.log('change4:', e);
   current4.value = e;
};

const handleClick = () => {
   popupRef.value.open();
   nextTick(() => {
      subsectionRef.value.refresh();
   });
};

const handleClose = () => {
   console.log('handleClose');
};
</script>

<style lang="scss" scoped>
@use '@/common/demo.scss';

.album {
   @include flex;
   align-items: flex-start;

   &__avatar {
      background-color: $uv-bg-color;
      padding: 5px;
      border-radius: 3px;
   }

   &__content {
      margin-left: 10px;
      flex: 1;
   }
}
.popup-content {
   width: 70vw;
   min-height: 30vh;
   padding: 20px;
}
</style>
